<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/admin/colpick.js"></script>
<script src="/js/echarts.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/admin.css">
<div class="tubiaof" style="font-weight:bold;font-size: 1.8em;line-height: 20px;height: 20px;">{{$cityname}}分类情况统计</div>
<div class="tubiao" id="barchart" style="width: 100%;height:400px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#E0ECFF;">
    <table class="am-table am-table-bd">
        <h3 style="text-align: center;">{{$cityname}}分类情况统计</h3>
        <thead><tr><th>网格</th>
            @foreach($category as $ca)
                <th>{{$ca->name}}</th>
            @endforeach
            <th>其它</th>
        </tr></thead>
        <tbody>
        @foreach($dataarr as $da)
            <tr><td>{{$da['product']}}</td>
                <td>{{$da['餐饮']}}</td>
                <td>{{$da['旅馆']}}</td>
                <td>{{$da['商场']}}</td>
                <td>{{$da['公共娱乐']}}</td>
                <td>{{$da['医疗场所']}}</td>
                <td>{{$da['休闲健身']}}</td>
                <td>{{$da['学校']}}</td>
                <td>{{$da['烟花爆竹']}}</td>
                <td>{{$da['4s店']}}</td>
                <td>{{$da['企业']}}</td>
                <td>{{$da['其它']}}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('barchart'));
    var option = {
        title : {
            text: '',
            x:'left     '
        },
        legend: {},
        tooltip: {},
        dataset: {
            dimensions:{!! $cate !!},
            source: {!! $data !!}
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
        ],
        dataZoom: [{
            type: 'slider',
            show: true, //flase直接隐藏图形
            xAxisIndex: [0],
            left: '9%', //滚动条靠左侧的百分比
            bottom: -5,
            start: 0,//滚动条的起始位置
            end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }]
    };
    myChart.setOption(option);
</script>
